<template>
<div class="VueQuillEditor">
 <quill-editor
        class="ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
</div>
</template>
<script>
 export default {
    name: "Editor",
    data() {
      return {
        content:null,
        editorOption:{}
        };
    },
    methods:{
onEditorBlur(e){
      console.log(e, '失去焦点事件');
    },
    onEditorFocus(e){
      console.log(e, '获得焦点事件');

    },
    onEditorChange(e){
      console.log(e, '内容改变事件');
    this.$store.commit("getcontent",e.html);
    console.log(this.$store.state.content);
    },
    }
 }
</script>
<style>
.quill-editor {
    height: 500px !important; /*这里控制高度*/
  }
  
</style>